<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="content-type" content="text/html; charset=UTF-8" />
    <title>车辆列表</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" type="text/css" media="screen" />

    <link rel="stylesheet" th:href="@{/lightbox2/css/lightbox.min.css}">
</head>
<body>


<div class="panel panel-default">
    <ol class="breadcrumb">
        <li><a href="/admin/user/">APP用户管理</a></li>
        <li class="active">车辆列表</li>
    </ol>

    <div style="padding: 10px">
        <form id="formUserCarSearch" method="post" action="/admin/user/carList/" class="form-inline">
            <div class="row">
                <div class='col-sm-3'>
                    <div class="form-group">
                        <label>车牌号码：</label>
                        <div class='input-group' id='carPlateNumber'>
                            <input class="form-control" type="text" name="carPlateNumber" th:value="${query.carPlateNumber}">
                            <input class="form-control" type="hidden" name="mobile" th:value="${query.mobile}">
                        </div>
                    </div>
                </div>

                <div class='col-sm-3'>
                    <div class="form-group">
                        <button id="btUserCarSearch" type="submit" class="btn btn-default">搜索</button>
                    </div>
                </div>
            </div>
        </form>

        <div style="padding-top: 10px">
            <!-- Table -->
            <table class="table table-striped">
                <tr>
                    <th><span>ID</span></th>
                    <th><span>车牌号码</span></th>
                    <th><span>车辆类型</span></th>
                    <th><span>座位数</span></th>
                    <th><span>行驶本</span></th>
                    <th><span>车辆照片</span></th>
                    <th><span>添加时间</span></th>
                    <th><span>状态</span></th>
                </tr>
                <th:block th:if="${not #lists.isEmpty(userCarList)}">
                    <tr th:each="userCar : ${userCarList}">
                        <td th:text="${userCar.carId}"></td>
                        <td th:text="${userCar.carPlateNumber}"></td>
                        <td th:text="${userCar.carModel}"></td>
                        <td th:text="${userCar.carSeat}"></td>
                        <td>
                            <a class="example-image-link" th:href="${'/upload/'+userCar.carPicLicense}" data-lightbox="example-1">
                                <img class="example-image" th:src="${'/upload/'+userCar.carPicLicense}" style="width: 50px;height: 50px;" />
                            </a>
                        </td>
                        <td>
                            <a class="example-image-link" th:href="${'/upload/'+userCar.carPicFront}" data-lightbox="example-1">
                                <img class="example-image" th:src="${'/upload/'+userCar.carPicFront}" style="width: 50px;height: 50px;" />
                            </a>
                        </td>
                        <td th:text="${#dates.format(userCar.createTime,'yyyy-MM-dd')}"></td>
                        <td th:if="${userCar.carStatus == 1}" th:text="已绑定"></td>
                        <td th:unless="${userCar.carStatus == 1}" th:text="未绑定"></td>
                    </tr>
                </th:block>
            </table>
        </div>
    </div>


    <ul class="pager">
        <li id="liPrePage">
            <a th:if="${not isFirstPage}" th:href="@{${'/admin/user/carList/'}(pageNum=${pageNum-1},pageSize=${pageSize},carPlateNumber=${query.carPlateNumber})}">
                <
            </a>
            <a th:if="${isFirstPage}" href="javascript:void(0);">
                <
            </a>
        </li>
        <li id="liNextPage">
            <a th:if="${not isLastPage}" th:href="@{${'/admin/user/carList/'}(pageNum=${pageNum+1},pageSize=${pageSize},carPlateNumber=${query.carPlateNumber})}">
                >
            </a>
            <a th:if="${isLastPage}" href="javascript:void(0);">
                >
            </a>
        </li>
    </ul>
</div>


<script th:src="@{/lightbox2/js/lightbox-plus-jquery.min.js}"></script>

</body>
</html>